.pocket {
  &-top {
    grid-area: mat-top;
    margin-bottom: -0.5em;
  }

  &-bottom {
    grid-area: mat-bot;
    margin-top: -0.5em;
  }

  @include breakpoint($mq-col1) {
    &-top {
      grid-area: pocket-top;
    }

    &-bottom {
      grid-area: pocket-bot;
    }
  }

  @include breakpoint($mq-col2-uniboard) {
    &-top {
      margin-bottom: $block-gap;
    }

    &-bottom {
      margin-top: $block-gap;
    }
  }
}

@include breakpoint($mq-col2) {
  @include breakpoint($mq-short) {
    #{$moves-tag} {
      display: none;
    }
  }

  @include breakpoint($mq-tall) {
    #{$moves-tag} {
      display: flex;
    }
  }
}

.ricons {
  @include breakpoint($mq-col1) {
    justify-content: flex-end;
  }
}

.rcontrols {
  .follow-up {
    & .button {
      padding: 9px 0;
    }
  }

  .rematch {
    &.button {
      height: 50px;
    }

    &-decline {
      height: 49px;
    }
  }
}

// These images are also referenced in crazyCtrl.ts (for preloading).
// The other file should be kept in sync.
@each $color, $c in ('white': w, 'black': b) {
  @each $role, $r in (pawn: P, knight: N, bishop: B, rook: R, queen: Q) {
    body.cursor-#{$color}-#{$role} * {
      cursor: url(../piece/cburnett/#{$c}#{$r}.svg) 22 22, auto !important;
    }
  }
}
